<!--
 * @Author: wwssaabb
 * @Date: 2021-07-03 16:05:06
 * @LastEditTime: 2021-07-05 09:23:04
 * @FilePath: \demo\koa2_demo\demo\连mongodb接数据库增删改查_demo\html\add.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <title>添加用户</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      width: 100vw;
      height: 100vh;
    }
    h1{
      padding:20px 0;
      text-align: center;
    }
    form{
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .sub-name,
    .sub-password,
    .sub-age,
    .sub-email,
    .sub-hobbies{
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 20px 0;
      margin-bottom: 20px;
    }
    .sub-name div,
    .sub-password div,
    .sub-age div,
    .sub-email div,
    .sub-hobbies div{
      width: 30vw;
      text-align: right;
      margin-right: 10px;
    }
    .sub-name input,
    .sub-password input,
    .sub-age input,
    .sub-email input{
      width: 40vw;
      height: 50px;
      border-radius: 10px;
      padding-left: 10px;
      outline: none;
      border: 1px solid #9a9a9a;
    }
    .sub-hobbies p{
      margin-right: 20px;
    }
    .sub-hobbies p input{
      margin-right: 5px;
    }
    .sub_btn{
      font-size: 18px;
      padding: 10px 20px;
      border-radius: 20px;
      color: #fff;
      border:none;
      background: #2b76bb;
    }
  </style>
  
</head>
<body>
  <h1>添加用户</h1>
  <form action="http://localhost:3000/add" method="GET" onsubmit="submit">
    <div class="sub-name">
      <div>用户名:</div>
      <input type="text" name="name" id="name" minlength="2" maxlength="20" placeholder="请填写用户名">
    </div>
    <div class="sub-password">
      <div>密码:</div>
      <input type="password" name="password"  id="password" placeholder="请填写密码">
    </div>
    <div class="sub-age">
      <div>年龄:</div>
      <input type="number" min="18" max="80" name="age" id="age" placeholder="请填写年龄">
    </div>
    <div class="sub-email">
      <div>邮箱:</div>
      <input type="text" name="email" id="email" placeholder="请填写邮箱">
    </div>
    <div class="sub-hobbies">
      <div>爱好:</div>
      <p><input type="checkbox" name="hobbies" id="hobbies_football" ><label for="hobbies_football">足球</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_basketball" ><label for="hobbies_basketball">篮球</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_badminton" ><label for="hobbies_badminton">羽毛球</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_rugby" ><label for="hobbies_rugby">橄榄球</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_code" ><label for="hobbies_code">敲代码</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_sleep" ><label for="hobbies_sleep">睡觉</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_Reading" ><label for="hobbies_Reading">看书</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_eat" ><label for="hobbies_eat">吃饭</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_music" ><label for="hobbies_music">听音乐</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_run" ><label for="hobbies_run">跑步</label></p>
      <p><input type="checkbox" name="hobbies" id="hobbies_playgames" ><label for="hobbies_playgames">玩游戏</label></p>
    </div>
    
    <div class="sub_btn">添加用户</div>
    
  
  </form>
  
  <script>
    document.querySelector('.sub_btn').addEventListener('click',()=>{
      let hobbies_arr=$('.sub-hobbies input')//document.querySelectorAll('input:[type=checkbox]')
      let hobbies=[]
      Array.from(hobbies_arr).forEach(e => {
        console.log(e.checked)
        if(e.checked){
          hobbies.push($('#'+e.id+'+ label')[0].innerHTML)
        }
      });
      let name=$('#name')[0].value
      if(name===''){
        alert('用户名不能为空')
        return
      }

      let password=$('#password')[0].value
      if(password===''){
        alert('密码不能为空')
        return
      }

      let age=$('#age')[0].value
      if(age===''){
        alert('年龄不能为空')
        return
      }else{
        let n=parseInt(age)
        if(n<18){
          alert('年龄不能小于18')
          return
        }else if(n>80){
          alert('年龄不能大于80')
          return
        }
      }

      let email=$('#email')[0].value
      if(email===''){
        alert('邮箱不能为空')
        return
      }

      if(hobbies.length===0||hobbies.length>3){
        alert('爱好不能为空或超过三个')
        return
      }

      let sub_obj={
        name,
        password,
        age,
        email,
        hobbies
      }
      let index=decodeURIComponent(window.location.href).lastIndexOf('/')
      $.post('http://localhost:3000/add',sub_obj,res=>{
        console.log(res)
        if(res.statusCode===200){
          alert(res.message)
          window.location.replace(decodeURIComponent(window.location.href).slice(0,index)+'/list.html')
        }
      })
    })
    
  </script>
</body>
</html>